<template>
  <div ref="homeview" class="home">
      <div class="home-nav">
        <BookNav @pushtype="getBooks"  :types="types" />
       
      </div>
      <div class="home-coenter">
          <BookList :bookList="getBooksRows" ></BookList>
      </div>
      <div class="page">
        <el-pagination
            @size-change ="sizeChange"
             @current-change = "nowpage"
             :hide-on-single-page ="true"
                background
                :page-size="8"
                :current-page="curPage"
                layout="prev, pager, next"
                :total="getBooksCount">
          </el-pagination>
      </div>
      <Car></Car>
  </div>
</template>

<script>
// @ is an alias to /src
import BookNav from './homedelist/bookNav.vue'
import BookList from "./homedelist/bookList.vue"
import Car from "../components/carousel.vue"
export default {
  data(){
    return{
      nowType:null,
      types:[],
      books:[],
      count:0,
      curr:1
     
    }
  }
  ,
  async created(){
    this.types = await this.$axios.get("/api/book/getBookType");
    this.types.unshift("全部");
  },
  components: {
    BookNav,
    BookList,
    Car
  
  },
  methods:{
    async nowpage(e){
      this.curr = e;//e为页数，一开始默认为1，分类为全部
      const result = await this.$axios.get("/api/book/findBook",{
        params:{
          type:this.nowType,
          page:e
        }
      })

     store.commit('setBooksRows',result.rows);
    store.commit('setBooksCount',result.count);
    document.getElementById("maintop").scrollTop = 0;
    },

    async getBooks(s){//获取后端给的书籍分类
      this.nowType = s
      this.curr = 1
      const result = await this.$axios.get("/api/book/findBook",{
        params:{
          type:s,
                  }
      });
     
        store.commit('setBooksRows',result.rows);
        store.commit('setBooksCount',result.count);
        document.getElementById("maintop").scrollTop = 0;
    },
  sizeChange(e){
    console.log();

  }
  },
  computed:{
      getBooksRows:{
        get(){
          return store.state.books.rows;
        },
        set(v){
          this.books = v;
        }
      }
      ,
  getBooksCount:{
        get(){
          return store.state.books.count;
        },
        set(v){
          this.books = v;
        }
      },
    curPage(){
      return this.curr
    }
  }
  
}
</script>
<style lang="less" scoped>
@media screen and (max-width:600px) {
  .home{
    .home-nav{
      height:10px !important;
      .nav-600{
        display: block !important;
        height: 40px !important;
      
      }
    }


  }
  
  
}
.home{
  height: auto;
  width: 100%;
  position: relative;
  .home-coenter{
    display: flex;
    justify-content: center;
  }
  .page{
    width: 100%;
    padding: 30px 0;
    position: relative;
    display:flex;
    justify-content: center;
   // transform: translateX(30%);
  }
}


</style> 